<template>
  <!-- 本页面是虚拟加载组件,还有个长列表懒加载组件（sickListPageLoad.vue）。 -->
  <view class="sickBody">
    <search-view :disabled="false" :showTxt="true" @confirm="confirm" />
    <scroll-view scroll-y="true" class="scroll-Y" :style="{ height: sickAllList.length * 40 }" @scroll="scroll">
      <view class="parentDom">
        <!-- <view :style="{ height: sickAllList.length * 40 + 'px' }"></view> -->
        <view :style="{ height: sickAllList.length * 40 + 'px' }"></view>
        <view class="positionRelative" :style="{ transform: getTransform }">
          <view v-for="item in visibleData" :key="item.id" class="height40" @click="choseSick(item)">{{
            item.name
          }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
/**
 * 搜索组件
 */
import searchView from '@/components/searchView';
import { throttle } from '@/utils/optimize';
export default {
  components: { searchView },
  props: {
    // 是否展示搜索按钮
    sickAllList: {
      type: Array,
      default: null
    },
    listData: {
      type: Array,
      default: () => []
    },
    itemSize: {
      type: Number,
      default: 40
    }
  },
  data() {
    return {
      searchList: [],
      // screenHeight: 1200,
      startOffset: 0,
      start: 0,
      end: 20,
      scrollTData: 0,
      count: 20
      // testData: []
    };
  },
  computed: {
    listHeight() {
      return this.listData.length * this.itemSize;
    },
    screenHeight() {
      return wx.getSystemInfoSync().windowHeight + 450;
    },
    visibleCount() {
      return Math.ceil(this.screenHeight / this.itemSize);
    },
    getTransform() {
      return `translate3d(0,${this.startOffset}px,0)`;
    },
    visibleData() {
      return this.sickAllList.slice(this.start, Math.min(this.end, this.sickAllList.length));
    }
  },
  methods: {
    close() {
      this.$emit('popClose');
    },
    center() {
      this.$emit('popCenter');
    },
    go_search() {
      this.$wxPromise.navigateTo({
        url: '/pages/searchDrug/index'
      });
    },
    confirm(val) {
      console.log('搜索', val);
      const data = JSON.parse(JSON.stringify(this.sickAllList));
      this.searchList = data.filter((item) => {
        if (item.name.indexOf(val) !== -1) {
          console.log('是否包含', item.name.indexOf(val));
          return item;
        }
        return false;
      });
    },
    choseSick(item) {
      this.$emit('choseSickSearch', item);
    },
    scroll(e) {
      this.scrollThrottle();
      this.scrollTData = e.target.scrollTop;
    },
    /* eslint-disable */
    scrollThrottle: throttle(function () {
      let scrollTop = this.scrollTData; // e.target.scrollTop;
      // 此时的开始索引
      this.start = Math.floor(scrollTop / this.itemSize);
      // 此时的结束索引
      this.end = this.start + this.visibleCount;
      // 此时的偏移量
      // console.log('位置', this.start, this.end);
      this.startOffset = scrollTop - (scrollTop % this.itemSize);
    }, 10)
    /* eslint-enable */
  }
};
</script>

<style lang="scss">
.sickBody {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  z-index: 99;
}
.infinite-list-container {
  height: 100%;
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.infinite-list-phantom {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: -1;
}

.infinite-list {
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  text-align: center;
}

.infinite-list-item {
  padding: 10px;
  color: #555;
  box-sizing: border-box;
  border-bottom: 1px solid #999;
}
.scroll-Y {
  height: 100%;
  overflow-y: scroll;
}
.height40 {
  height: 40px;
  line-height: 40px;
  width: 100%;
  overflow: hidden;
  border-bottom: 1rpx solid #d2d2d2;
}
.positionRelative {
  width: 92%;
  margin: 0 3%;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 32rpx;
  padding-bottom: 300rpx;
  //   height: 100%;
  //   width: 100%;
}
.parentDom {
  position: relative;
}
</style>
